<template>
    <div class="msg-mask">
        <div style="display: none" id="msgMaskId">
            <div class="btn-mask-box">
                <div class="btn-mask-body sea shui-bo">
                    <!-- btn-mask-body -->
                    <!-- btn-mask-body-title -->
                    <div class="btn-mask-body-title">
                        提示
                        <span @click="disbtnMask">X</span>
                    </div>
                    <div class="btn-mask-body-contente">
                        <!-- btn-mask-body-contente -->
                        <!-- <p><b>您还没有登录!</b></p> -->
                        <p>
                            <b>{{ title }}</b>
                        </p>
                        <button @click="pro_callback">{{ btnTitle }}</button>
                    </div>
                    <span class="wave"></span>
                    <span class="wave"></span>
                    <span class="wave"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "msg",
            btnTitle: "确定",
            btnCallback: function () {
                this.disbtnMask();
                return;
            },
        };
    },
    methods: {
        setTitle(str) {
            this.title = str;
        },
        setBtnTitle(str) {
            this.btnTitle = str;
        },
        setBtnCallback(fun) {
            this.btnCallback = fun;
        },
        setInformation(obj) {
            if (obj.title != undefined) {
                // console.warn('title 使用默认参数')
                this.title = obj.title;
            }
            if (obj.btnTitle != undefined) {
                // console.warn('按钮标题 使用默认参数')
                this.btnTitle = obj.btnTitle;
            }
            if (obj.callback != undefined) {
                // console.warn('按钮点击事件 使用默认参数')
                this.btnCallback = obj.callback;
            }
        },
        pro_callback() {
            //如果没给点击函数 则直接为空
            try {
                this.disbtnMask();
                this.btnCallback();
            } catch (err) {
                throw err;
            }
        },
        //关掉自己
        disbtnMask() {
            let e = document.getElementById("msgMaskId");
            e.style.display = "none";
            // console.log("关掉自己");
        },
        // 打开自己
        showbtnMask() {
            let e = document.getElementById("msgMaskId");
            e.style.display = "block";
            // console.log("打开自己");
        },
        //去登陆页面
        goLogin() {
            this.disbtnMask();
            this.$router.push("/login");
        },
    },
};
</script>

<style lang="less" scoped>
.btn-mask {
    opacity: 1 !important;
}
.btn-mask-box {
    z-index: 999;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    background-color: rgba(0, 0, 0, 0.2);

    .btn-mask-body {
        width: 300px;
        height: 300px;
        opacity: 1;
        border-radius: 10px;
        /*
        color: #1d1d1f;
        border: 1px solid gray;
        background-color: #f5f5f7;
        border-radius: 20px;
        overflow: hidden;
        */
        .btn-mask-body-title {
            /*background-color: rgba(00, 150, 255, 1);*/
            color: white;
            text-align: center;
            font-size: 20px;
            height: 40px;
            line-height: 40px;
            position: relative;
            z-index: 999;
            span {
                position: absolute;
                top: 5px;
                right: 10px;
                background-color: rgba(255, 255, 255, 0.4);
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 5px;
                cursor: pointer;
                user-select: none;
            }
        }
        .btn-mask-body-contente {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 210px;
            z-index: 999;

            p {
                font-size: 25px;
                z-index: 999;
            }
            color: white;
            button {
                padding: 5px 10px;
                margin-bottom: 20px;
                border: 0;
                background-color: rgb(248, 193, 12);
                color: white;
                border-radius: 5px;
                height: 30px;
                width: 150px;
                font-size: 15px;
                cursor: pointer;
                z-index: 999;
            }
        }
    }
}
.sea {
    width: 300px;
    height: 300px;
    background-color: whitesmoke;
    background-image: linear-gradient(
        darkblue,
        rgba(255, 255, 255, 0) 80%,
        rgba(255, 255, 255, 0.5)
    );
    border-radius: 5px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}
.sea .wave {
    position: absolute;
    top: -250px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: deepskyblue;
    border-radius: 43%;
    filter: opacity(0.4);
    z-index: 900;
    animation: drift linear infinite;
    transform-origin: 50% 48%;
}
.sea .wave:nth-of-type(1) {
    animation-duration: 5s;
}
.sea .wave:nth-of-type(2) {
    animation-duration: 7s;
}
.sea .wave:nth-of-type(3) {
    animation-duration: 9s;
    background-color: orangered;
    filter: opacity(0.1);
}
@keyframes drift {
    from {
        transform: rotate(360deg);
    }
}
</style>